<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 原因是当我们axios模块中导⼊对象时，使⽤的是默认的实例，当给这些实例设置默认配置时这些配置就被固定下来了，但后续开发中某些配置或许会不⼀样，所以你需要创建多个实例，⽐如你需要访问多个服务地址，⽽这些服务请求和响应的结构都完全不同，那么你可以通过axios.create创建不同的实例来处理-->

   <button id="btn">发送请求</button>
<script>
     /*实例的配置： const instance = axios.create({
        baseURL: 'https://some-domain.com/api/',
        timeout: 1000,
        headers: {'X-Custom-Header': 'foobar'}
    }) */
    const axios1 = axios.create({
        baseURL:'/',// baseURL(公共路径)将自动加在url前面，除非url是一个绝对 URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对 URL
        timeout:10000,
        headers:{}//配置请求头
        
    })
    const  btn =document.querySelector('#btn')
    btn.onclick = async function(){
        const result = await axios1.get('/user',{
            params:{
                userId:'001',
            }
        })
        //await返回的是一个对象 对象里有
         /*- config:是axios请求的时候传入的配置对象
                - data:后端响应的数据
                - headers:响应头
                - request:底层真正使用的xhr实例对象
                - status:响应状态码
                - statusText:响应状态描述*/
        console.log(result,'result')
    }

</script>
</body>
</html>